<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3</title>
    <style>
        #my3dSpace {
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;
            overflow: hidden;
        }
        #pageGroup {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            -webkit-transform-style:preserve-3d;
            position: relative;
        }
        .page {
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: #000;
            color: white;
            font-weight: bold;
            font-size: 360px;
            line-height: 360px;
            text-align: center;
            position: absolute;
        }
        #page1 {
            -webkit-transform-origin:bottom;
            -webkit-transition: -webkit-transform 1s linear;
        }
        #page2, #page3, #page4, #page5, #page6 {
            -webkit-transform-origin:bottom;
            -webkit-transition: -webkit-transform 1s linear;
            -webkit-transform: rotateX(90deg);
        }
        #operation {
            margin: 40px auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="my3dSpace">
        <div id="pageGroup">
            <div class="page" id="page1">1</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page5">5</div>
            <div class="page" id="page6">6</div>
        </div>
    </div>
    <div id="operation">
        <a href="javascript: next()">next</a>
        <a href="javascript: prev()">prev</a>
    </div>
    <script>
        let curIndex = 1; // 当前显示的索引
        // 下一个
        function next() {
            if (curIndex === 6) {
                return;
            }
            var curPage = document.getElementById('page' + curIndex);
            curPage.style.webkitTransform = 'rotateX(-90deg)';
            curIndex++;
            var nextPage = document.getElementById('page' + curIndex);
            nextPage.style.webkitTransform = 'rotateX(0deg)';
        }
        // 上一个
        function prev() {
            if (curIndex === 1) {
                return;
            }
            var curPage = document.getElementById('page' + curIndex);
            curPage.style.webkitTransform = 'rotateX(90deg)';
            curIndex--;
            var prevPage = document.getElementById('page' + curIndex);
            prevPage.style.webkitTransform = 'rotateX(0deg)'
        }
    </script>
</body>
</html>
